import React, { useEffect, useState } from "react";
import { ResultPage, Card, Tabs, Input, Button } from "antd-mobile";
import { LoopOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import request from '../../api/request'
function Index() {
    let nav=useNavigate()
  let [start, setStart] = useState();
  let [end, setEnd] = useState();
  const kk=()=>{
    nav(`/list?start=${start}&end=${end}`)
  }
  const getdata=async()=>{
    let res=await request.get('/api/trip/airplane',{
        params:{
            start,end
        }
    })
    console.log(res.data.data)
  }
  useEffect(()=>{
    getdata()
  },[])
  return (
    <div>
      <ResultPage title="票务系统">
        <ResultPage.Card style={{ padding: 8 }}>
          <div>
            <Tabs>
              <Tabs.Tab title="飞机票" key="fruits">
                <div className="kk">
                  <Input
                    placeholder="请输入起始地"
                    value={start}
                    onChange={(val) => {
                      setStart(val);
                    }}
                  />
                  <LoopOutline fontSize={60}/>
                  <Input
                    placeholder="请输入目的地"
                    value={end}
                    onChange={(val) => {
                      setEnd(val);
                    }}
                  />
                </div>
                <Button block color="primary" onClick={()=>kk()}>
                 搜索
                </Button>
              </Tabs.Tab>
              <Tabs.Tab title="火车票" key="vegetables">
                火车票
              </Tabs.Tab>
              <Tabs.Tab title="汽车票" key="animals">
                汽车票
              </Tabs.Tab>
            </Tabs>
          </div>
        </ResultPage.Card>

        
      </ResultPage>
    </div>
  );
}

export default Index;
